<template>
  <div>
    <div>
      <jxf-titletip :title="title" @refreshPage="refreshFuc" :hasGoBack="true" @goBack="goPreviewBack"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="detailInfo" ref="detailInfo">
          <el-form-item label="关联-订单号:" prop="orderNo">
            <el-input v-model="detailInfo.orderNo" clearable ref="input-orderNo" @keyup.enter.native="enterNextInput('merchantName')"></el-input>
          </el-form-item>
          <el-form-item label="订单类型:" prop="orderType">
            <el-select v-model="detailInfo.orderType" clearable placeholder="全部订单">
              <el-option label="普通订单" value="0"></el-option>
              <!--<el-option label="直通订单" value="1"></el-option>-->
              <el-option label="签约订单" value="1"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date :startTime.sync="detailInfo.startTime" :endTime.sync="detailInfo.endTime" label="下单时间段："></jxf-Date>
          <el-form-item label="采购商企业名称:" prop="merchantName">
            <el-input v-model="detailInfo.merchantName" clearable ref="input-merchantName" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('detailInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="accountTable">
          <template slot="orderAmount" slot-scope="supplier">
            <div>
              <div>￥{{supplier.row.orderAmount && supplier.row.orderAmount != 0 ? formatMoney.twoDecimal(supplier.row.orderAmount) : '0.00'}}</div>
            </div>
          </template>
          <template slot="status" slot-scope="supplier">
            <div v-if="supplier.row.status === 0">已完成</div>
            <div v-if="supplier.row.status === 1">待付款</div>
            <div v-if="supplier.row.status === 2">待接单</div>
            <div v-if="supplier.row.status === 3">待发货</div>
            <div v-if="supplier.row.status === 4">待收货</div>
            <div v-if="supplier.row.status === 6">已关闭</div>
            <div v-if="supplier.row.status === 7">已关闭</div>
            <div v-if="supplier.row.status === 8">已关闭</div>
            <div v-if="supplier.row.status === 9">已关闭</div>
            <div v-if="supplier.row.status === 10">已关闭</div>
          </template>
          <template slot="orderType" slot-scope="supplier">
            <div v-if="supplier.row.orderType == '0'">普通订单</div>
            <div v-if="supplier.row.orderType == '1'">签约订单/直通订单</div>
            <!--<div v-if="supplier.row.orderType == '2'">签约订单</div>-->
          </template>
          <template slot="orderTime" slot-scope="supplier">
            <div>{{supplier.row.orderTime ? FormatDate.timeFormat(supplier.row.orderTime) : ""}}</div>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "ReceivablesDetail",
        props: {
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            title: "应收未收明细",
            detailInfo: {
              endTime: "",
              merchantName: "",
              orderNo: "",
              orderType: "",
              startTime: ""
            },
            isSuccess: false,
            formatMoney: formatMoney,
            FormatDate: FormatDate,
            accountTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '1',
                  minWidth: '140',
                  label: '供应商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '2',
                  width: '120',
                  label: '供应商主体账号',
                  prop: 'telphone'
                },
                {
                  id: '3',
                  minWidth: '140',
                  label: '关联-订单号',
                  prop: 'orderNo'
                },
                {
                  id: '4',
                  minWidth: '140',
                  label: '采购商企业名称',
                  prop: 'merchantName',
                },
                {
                  id: '5',
                  label: '订单状态',
                  prop: 'status',
                  show: 'template'
                },
                {
                  id: '6',
                  label: '订单类型',
                  show: 'template',
                  prop: 'orderType'
                },
                {
                  id: '7',
                  label: '下单时间',
                  show: 'template',
                  width: '160',
                  prop: 'orderTime'
                },
                {
                  id: '8',
                  minWidth: '120',
                  label: '订单应收金额',
                  show: 'template',
                  prop: 'orderAmount'
                },
              ],
              operation: [],
              data: this.dataInfo.dataList ? this.dataInfo.dataList : []
            },
            pageTotal: this.dataInfo.total,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          exportExcel(){
            this.isSuccess = true;
            let data = {
              ...this.detailInfo,
              supplyId: this.dataInfo.supplyId ? this.dataInfo.supplyId : "",
              enterpriseName: this.dataInfo.enterpriseName
            }
            ajax.export(apis.finance.exportSupplierDetail, data).then((res) => {
              this.isSuccess = false;
            }).catch((err) => {
              this.$message.error(err.message)
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          getData() {
            this.accountTable.loading = true;
            let data = {
              ...this.detailInfo,
              supplyId: this.dataInfo.supplyId,
              enterpriseName: this.dataInfo.enterpriseName,
              page: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.finance.getSuppierStaticticDetail, data).then(res => {
              if(res.code === "10000000") {
                this.accountTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.accountTable.loading = false;
            })
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          refreshFuc() {
            this.resetForm('detailInfo')
            this.currentPage = 1;
            this.pageSize = 10
            this.getData()
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
          goPreviewBack() {
            this.$emit('goBack')
          }
        },
        created() {

        }
    }
</script>

<style lang="scss" scoped>

</style>
